<!DOCTYPE html>
<html>
  <head>
    <title>IAT Example</title>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-iat-html.js"></script>
    <script src="../dist/plugin-iat-image.js"></script>
    <script src="../dist/plugin-html-keyboard-response.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <link href="../packages/jspsych/css/jspsych.css" rel="stylesheet">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    // manually preload images due to presenting them with timeline variables
    var images = ['img/age/of1.jpg','img/age/of2.jpg','img/age/of3.jpg','img/age/om1.jpg','img/age/om2.jpg','img/age/om3.jpg',
        'img/age/yf1.jpg','img/age/yf4.jpg','img/age/yf5.jpg','img/age/ym2.jpg','img/age/ym3.jpg','img/age/ym5.jpg'];

    var preload = {
      type: jsPsychPreload,
      images: images
    };

    var welcome_block = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<p>Welcome to the Age Task. In this study you will ' +
      'complete an Implicit Association Test (IAT) in which you ' +
      'will be asked to sort pictures and words into groups as ' +
      'fast as you can.</p><p>Press any key to begin.</p>',
      post_trial_gap: 1500
    };

    var category_block = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<p>Next, you will use the "e" and "i" computer keys ' + 'to categorize items into groups as fast as you can. ' +
      'These are the four groups and the items that belong to each:<br><br>' +
      '<strong>Good</strong>:<br>' + 'Fabulous, Excitement, Glorious, Cheerful, Cherish, ' +
      'Enjoy, Delightful, Joyous<br><br>' + '<strong>Bad</strong>:<br>' + 'Humiliate, ' +
      'Evil, Grief, Yucky, Detest, Poison, Abuse, Despise<br><br>' +
      '<strong>Old</strong>:<br>' + "<img src='img/age/of1.jpg'></img>  " +
      "<img src='img/age/of2.jpg'></img>  " + "<img src='img/age/of3.jpg'></img>  " +
      "<img src='img/age/om1.jpg'></img>  " + "<img src='img/age/om2.jpg'></img>  " +
      "<img src='img/age/om3.jpg'></img><br><br>" + '<strong>Young</strong>:<br>' +
      "<img src='img/age/yf1.jpg'></img>  " + "<img src='img/age/yf4.jpg'></img>  " +
      "<img src='img/age/yf5.jpg'></img>  " + "<img src='img/age/ym2.jpg'></img>  " +
      "<img src='img/age/ym3.jpg'></img>  " + "<img src='img/age/ym5.jpg'></img><br><br>" +
      "Press any key to continue.</p>",
      post_trial_gap: 1500
    };

    var instructions_block = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "<div style='position: absolute; top: 18%; left: 20%'><p>Press e for:<br><strong>OLD</strong></p></div>" +
      "<div style='position: absolute; top: 18%; right: 20%'><p>Press i for:<br><strong>YOUNG</strong></p></div>" +
      "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Put a left finger on the <strong>e</strong> key for items that belong to the Old People category. Put a right finger on the " +
      "<strong>i</strong> key for items that belong to the Young People " +
      "category. Items will appear one at a time.<br><br>" + "If you " +
      "make a mistake, a red X will appear. Press the keys listed below " +
      "to continue. Go as fast as you can while being accurate.<br><br> " +
      "Press the any key when you are ready to start.</div>",
    };

    var trial_block = {
      timeline: [
        {
          type: jsPsychIatImage,
          stimulus: jsPsych.timelineVariable('stimulus'),
          stim_key_association: jsPsych.timelineVariable('stim_key_association'),
          html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
          bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
          force_correct_key_press: true,
          display_feedback: true,
          trial_duration: 3000, //Only if display_feedback is false
          left_category_key: 'e',
          right_category_key: 'i',
          left_category_label: ['OLD'],
          right_category_label: ['YOUNG'],
          response_ends_trial: true,
          data: { iat_type: 'practice' }
        }
      ],
      timeline_variables: [
        {stimulus: "img/age/of1.jpg", stim_key_association: "left"},
        {stimulus: "img/age/of2.jpg", stim_key_association: "left"},
        {stimulus: "img/age/of3.jpg", stim_key_association: "left"},
        {stimulus: "img/age/om1.jpg", stim_key_association: "left"},
        {stimulus: "img/age/om2.jpg", stim_key_association: "left"},
        {stimulus: "img/age/om3.jpg", stim_key_association: "left"},
        {stimulus: "img/age/yf1.jpg", stim_key_association: "right"},
        {stimulus: "img/age/yf4.jpg", stim_key_association: "right"},
        {stimulus: "img/age/yf5.jpg", stim_key_association: "right"},
        {stimulus: "img/age/ym2.jpg", stim_key_association: "right"},
        {stimulus: "img/age/ym3.jpg", stim_key_association: "right"},
        {stimulus: "img/age/ym5.jpg", stim_key_association: "right"}
      ],
      randomize_order: true,
      repetitions: 2
    };

    var instructions_block2 = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br><strong>BAD</strong></div>" +
      "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br><strong>GOOD</strong></div>" +
      "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Put a left finger on the <strong>e</strong> key for items that " +
      "belong to the Bad category. Put a right finger on the " +
      "<strong>i</strong> key for items that belong to the Good " +
      "category. Items will appear one at a time.<br><br>" + "If you " +
      "make a mistake, a red X will appear. Press the keys listed below " +
      "to continue. Go as fast as you can while being accurate.<br><br> " +
      "Press the any key when you are ready to start.</div>",
    };

    var trial_block2 = {
      timeline: [
        {
          type: jsPsychIatHtml,
          stimulus: jsPsych.timelineVariable('stimulus'),
          stim_key_association: jsPsych.timelineVariable('stim_key_association'),
          html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
          bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
          force_correct_key_press: true,
          display_feedback: true,
          trial_duration: 3000, //Only if display_feedback is false
          left_category_key: 'e',
          right_category_key: 'i',
          left_category_label: ['BAD'],
          right_category_label: ['GOOD'],
          response_ends_trial: true,
          data: { iat_type: 'practice' }
        }
      ],
      timeline_variables: [
        {stimulus: "Humiliate", stim_key_association: "left"},
        {stimulus: "Evil", stim_key_association: "left"},
        {stimulus: "Grief", stim_key_association: "left"},
        {stimulus: "Yucky", stim_key_association: "left"},
        {stimulus: "Detest", stim_key_association: "left"},
        {stimulus: "Poison", stim_key_association: "left"},
        {stimulus: "Abuse", stim_key_association: "left"},
        {stimulus: "Despise", stim_key_association: "left"},
        {stimulus: "Fabulous", stim_key_association: "right"},
        {stimulus: "Excitement", stim_key_association: "right"},
        {stimulus: "Glorious", stim_key_association: "right"},
        {stimulus: "Cheerful", stim_key_association: "right"},
        {stimulus: "Cherish", stim_key_association: "right"},
        {stimulus: "Enjoy", stim_key_association: "right"},
        {stimulus: "Delightful", stim_key_association: "right"},
        {stimulus: "Joyous", stim_key_association: "right"}
      ],
      randomize_order: true,
      repetitions: 2
    };

    var instructions_block3 = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "<div style='position: absolute; top: 18%; left: 20%'>Press e for:<br> " +
      "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" +
      "Press i for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" +
      "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>e</strong> for Bad and for " +
      "Old People<br>" + "Use <strong>i</strong> for Good and for Young People<br>" +
      "Each item belongs to only one category.<br><br>" + "If you " +
      "make a mistake, a red X will appear. Press the keys listed below " +
      "to continue. Go as fast as you can while being accurate.<br><br> " +
      "Press the any key when you are ready to start.</div>",
    };

    var trial_block3 = {
      timeline: [
        {
          type: jsPsych.timelineVariable('type'),
          stimulus: jsPsych.timelineVariable('stimulus'),
          stim_key_association: jsPsych.timelineVariable('stim_key_association'),
          html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
          bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
          force_correct_key_press: true,
          display_feedback: true,
          trial_duration: 3000, //Only if display_feedback is false
          left_category_key: 'e',
          right_category_key: 'i',
          left_category_label: ['BAD', 'OLD'],
          right_category_label: ['GOOD', 'YOUNG'],
          response_ends_trial: true,
          data: { iat_type: 'practice' }
        }
      ],
      timeline_variables: [
        {type: jsPsychIatImage, stimulus: "img/age/of1.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/of2.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/of3.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/om1.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/om2.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/om3.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/yf1.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/yf4.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/yf5.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/ym2.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/ym3.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/ym5.jpg", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Humiliate", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Evil", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Grief", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Yucky", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Detest", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Poison", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Abuse", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Despise", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Fabulous", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Excitement", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Glorious", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Cheerful", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Cherish", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Enjoy", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Delightful", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Joyous", stim_key_association: "right"}
      ],
      randomize_order: true,
      repetitions: 1
    };

    var instructions_block4 = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "<div style='position: absolute; top: 18%; left: 20%'>Press e for:<br> " +
      "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" +
      "Press i for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" +
      "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>This is the same as the previous part.<br>" + "Use <strong>e</strong> for Bad and for " +
      "Old People<br>" + "Use <strong>i</strong> for Good and for Young People<br>" +
      "Each item belongs to only one category.<br><br>" + "If you " +
      "make a mistake, a red X will appear. Press the keys listed below " +
      "to continue. Go as fast as you can while being accurate.<br><br> " +
      "Press the any key when you are ready to start.</div>",
    };

    var trial_block4 = {
      timeline: [
          {
            type: jsPsych.timelineVariable('type'),
            is_html: jsPsych.timelineVariable('is_html'),
            stimulus: jsPsych.timelineVariable('stimulus'),
            stim_key_association: jsPsych.timelineVariable('stim_key_association'),
            html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
            bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
            force_correct_key_press: true,
            display_feedback: true,
            trial_duration: 3000, //Only if display_feedback is false
            left_category_key: 'e',
            right_category_key: 'i',
            left_category_label: ['BAD', 'OLD'],
            right_category_label: ['GOOD', 'YOUNG'],
            response_ends_trial: true,
            data: { iat_type: 'bad-old' }
          }
        ],
        timeline_variables: [
          {type: jsPsychIatImage, stimulus: "img/age/of1.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/of2.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/of3.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/om1.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/om2.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/om3.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/yf1.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/yf4.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/yf5.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/ym2.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/ym3.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/ym5.jpg", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Humiliate", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Evil", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Grief", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Yucky", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Detest", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Poison", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Abuse", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Despise", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Fabulous", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Excitement", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Glorious", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Cheerful", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Cherish", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Enjoy", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Delightful", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Joyous", stim_key_association: "right"}
        ],
        randomize_order: true,
        repetitions: 2
      };

      var instructions_block5 = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: "<div style='position: absolute; top: 18%; left: 20%'>Press e for:<br>" + "<strong>YOUNG</strong></div>" +
        "<div style='position: absolute; top: 18%; right: 20%'>Press i for:<br>" + "<strong>OLD</strong></div>" +
        "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Watch out, the labels have changed positions!<br>" +
        "Use <strong>e</strong> for Young People<br>" + "Use <strong>i</strong> for Old People<br><br>" +
        "If you make a mistake, a red X will appear. Press the keys listed below " +
        "to continue. Go as fast as you can while being accurate.<br><br> " +
        "Press the any key when you are ready to start.</div>"
      };

      var trial_block5 = { 
        timeline: [
          {
            type: jsPsychIatImage,
            is_html: false,
            stimulus: jsPsych.timelineVariable('stimulus'),
            stim_key_association: jsPsych.timelineVariable('stim_key_association'),
            html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
            bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
            force_correct_key_press: true,
            display_feedback: true,
            trial_duration: 3000, //Only if display_feedback is false
            left_category_key: 'e',
            right_category_key: 'i',
            left_category_label: ['YOUNG'],
            right_category_label: ['OLD'],
            response_ends_trial: true,
            data: { iat_type: 'practice' }
          }
        ],
        timeline_variables: [
          {type: jsPsychIatImage, stimulus: "img/age/of1.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/of2.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/of3.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/om1.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/om2.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/om3.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/yf1.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/yf4.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/yf5.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/ym2.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/ym3.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/ym5.jpg", stim_key_association: "left"}
        ],
        randomize_order: true,
        repetitions: 2
      };

      var instructions_block6 = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: "<div style='position: absolute; top: 18%; left: 20%'>Press e for:<br>" + "<strong>BAD</strong><br>" + "or<br>" +
        "<strong>YOUNG</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press i for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" +
        "<strong>OLD</strong></div>" +
        "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>e</strong> for Bad and for Young People<br>" +
        "Use <strong>i</strong> for Good and for Old People<br><br>" +
        "If you make a mistake, a red X will appear. Press the keys listed below " +
        "to continue. Go as fast as you can while being accurate.<br><br> " +
        "Press the any key when you are ready to start.</div>"
      };

      var trial_block6 = {
        timeline: [
        {
          type: jsPsych.timelineVariable('type'),
          stimulus: jsPsych.timelineVariable('stimulus'),
          stim_key_association: jsPsych.timelineVariable('stim_key_association'),
          html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
          bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
          force_correct_key_press: true,
          display_feedback: true,
          trial_duration: 3000, //Only if display_feedback is false
          left_category_key: 'e',
          right_category_key: 'i',
          left_category_label: ['BAD', 'YOUNG'],
          right_category_label: ['GOOD', 'OLD'],
          response_ends_trial: true,
          data: {iat_type: 'practice'}
        }
        ],
        timeline_variables: [
          {type: jsPsychIatImage, stimulus: "img/age/of1.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/of2.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/of3.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/om1.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/om2.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/om3.jpg", stim_key_association: "right"},
          {type: jsPsychIatImage, stimulus: "img/age/yf1.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/yf4.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/yf5.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/ym2.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/ym3.jpg", stim_key_association: "left"},
          {type: jsPsychIatImage, stimulus: "img/age/ym5.jpg", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Humiliate", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Evil", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Grief", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Yucky", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Detest", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Poison", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Abuse", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Despise", stim_key_association: "left"},
          {type: jsPsychIatHtml, stimulus: "Fabulous", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Excitement", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Glorious", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Cheerful", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Cherish", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Enjoy", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Delightful", stim_key_association: "right"},
          {type: jsPsychIatHtml, stimulus: "Joyous", stim_key_association: "right"}
        ],
        randomize_order: true,
        repetitions: 1
      };

      var instructions_block7 = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: "<div style='position: absolute; top: 18%; left: 20%'>Press e for:<br>" + "<strong>Bad</strong><br>" + "or<br>" +
        "<strong>Young People</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press i for:<br>" + "<strong>Good</strong><br>" + "or<br>" +
        "<strong>Old People</strong></div>" +
        "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>This is the same as the previous part<br>" +
        "Use <strong>e</strong> for Bad and for Young People<br>" +
        "Use <strong>i</strong> for Good and for Old People<br>" +
        "Each item belongs to only one category<br><br>" +
        "If you make a mistake, a red X will appear. Press the keys listed below " +
        "to continue. Go as fast as you can while being accurate.<br><br> " +
        "Press the any key when you are ready to start.</div>"
      };

    var trial_block7 = {
      timeline: [
      {
        type: jsPsych.timelineVariable('type'),
        is_html: jsPsych.timelineVariable('is_html'),
        stimulus: jsPsych.timelineVariable('stimulus'),
        stim_key_association: jsPsych.timelineVariable('stim_key_association'),
        html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
        bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
        force_correct_key_press: true,
        display_feedback: true,
        trial_duration: 3000, //Only if display_feedback is false
        left_category_key: 'e',
        right_category_key: 'i',
        left_category_label: ['BAD', 'YOUNG'],
        right_category_label: ['GOOD', 'OLD'],
        response_ends_trial: true,
        data: {iat_type: 'bad-young'}
      }
      ],
      timeline_variables: [
        {type: jsPsychIatImage, stimulus: "img/age/of1.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/of2.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/of3.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/om1.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/om2.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/om3.jpg", stim_key_association: "right"},
        {type: jsPsychIatImage, stimulus: "img/age/yf1.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/yf4.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/yf5.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/ym2.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/ym3.jpg", stim_key_association: "left"},
        {type: jsPsychIatImage, stimulus: "img/age/ym5.jpg", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Humiliate", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Evil", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Grief", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Yucky", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Detest", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Poison", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Abuse", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Despise", stim_key_association: "left"},
        {type: jsPsychIatHtml, stimulus: "Fabulous", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Excitement", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Glorious", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Cheerful", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Cherish", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Enjoy", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Delightful", stim_key_association: "right"},
        {type: jsPsychIatHtml, stimulus: "Joyous", stim_key_association: "right"}
      ],
      randomize_order: true,
      repetitions: 2
    };

      var debrief_block = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: function() {
          // calculate D-score from https://faculty.washington.edu/agg/pdf/GB&N.JPSP.2003.pdf
          // first find mean RT
          var bad_old = jsPsych.data.get().filter({iat_type: 'bad-old'}).filterCustom(function(x) { return x.rt < 10000 });
          var mean_correct_responses_bad_old = bad_old.filter({correct: true}).select('rt').mean();
          var bad_young = jsPsych.data.get().filter({iat_type: 'bad-young'}).filterCustom(function(x) { return x.rt < 10000 });
          var mean_correct_responses_bad_young = bad_young.filter({correct: true}).select('rt').mean();

          // get overall sd
          var sd = bad_old.join(bad_young).filter({correct: true}).select('rt').sd();

          var d = (mean_correct_responses_bad_young - mean_correct_responses_bad_old) / sd;

          return "<p>You're done! Below is some information about how you performed.</p>"+
            "<p>When the pairs were BAD/YOUNG and GOOD/OLD, it took you an average of <strong>"+Math.floor(mean_correct_responses_bad_young)+"ms</strong> to respond.</p>"+
            "<p>When the pairs were BAD/OLD and GOOD/YOUNG, it took you an average of <strong>"+Math.floor(mean_correct_responses_bad_old)+"ms</strong> to respond.</p>"+
            "<p>Your D score, an index of performance that takes into account this difference and the overall level of variability in your responses, is <strong>"+d.toFixed(2)+"</strong></p>"+
            "<p>For reference, the Project Implicit IAT website labels D scores above 0.15 as a slight bias, scores above 0.35 as a moderate bias, and scores above 0.65 a strong bias.</p>"
        }
      };

      var timeline = [];
      timeline.push(preload);
      timeline.push(welcome_block);
      timeline.push(category_block);
      timeline.push(instructions_block);
      timeline.push(trial_block);
      timeline.push(instructions_block2);
      timeline.push(trial_block2);
      timeline.push(instructions_block3);
      timeline.push(trial_block3);
      timeline.push(instructions_block4);
      timeline.push(trial_block4);
      timeline.push(instructions_block5);
      timeline.push(trial_block5);
      timeline.push(instructions_block6);
      timeline.push(trial_block6);
      timeline.push(instructions_block7);
      timeline.push(trial_block7);
      timeline.push(debrief_block);

      jsPsych.run(timeline);

  </script>
</html>